import React, { Component } from 'react';
import { NavBar, Carousel, Flex } from 'antd-mobile';
import "./index.css"
import SearchInput from "../search/searchInput"
import myaxios from "../../utils/myaxios"
import { withRouter } from "react-router-dom"
import "lib-flexible"

class index extends Component {
    componentDidMount() {
        myaxios.get("home/swiperdata").then(res => {
            // console.log(res);
            this.setState({
                lb_list: res
            })
        })
        myaxios.get("/home/catitems").then(res => {
            // console.log(res);
            this.setState({
                catitems: res
            })
        })
        myaxios.get("home/floordata").then(res => {
            // console.log(res);
            this.setState({
                product: res
            })
        })
    }
    state = {
        lb_list: [],
        imgHeight: 170,
        catitems: [],
        product: []
    }
    handleLb = (params) => {
        this.props.history.push("/goodDetail/" + params)
    }
    // 导航图的点击
    handClickCat = (params) => {
        this.props.history.push("/category")
    }
    // 图列表的
    handleImage =(params) => {
        this.props.history.push("/goodlist/query='123'")
    }
    render() {
        return (
            <div className="yg-index">
                {/* 首页导航条的开始 */}
                <div className="yg-index-nav">
                    <NavBar
                        className="index-nav"
                    >优购商城</NavBar>

                </div>
                {/* 首页导航条的结束 */}
                {/* 首页搜索框的开始 */}
                <div className="yg-index-search">
                    <SearchInput></SearchInput>
                </div>
                {/* 首页搜索框的结束 */}
                {/* 首页轮播图的开始 */}
                <div className="yg-index-lb">
                    <Carousel
                        autoplay={true}
                        infinite
                        beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                        afterChange={index => console.log('slide to', index)}
                    >
                        {this.state.lb_list.map(val => (
                            <div
                                onClick={this.handleLb.bind(this, val.goods_id)}
                                key={val.goods_id}
                                href="http://www.alipay.com"
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                                <img
                                    src={val.image_src}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </div>
                        ))}
                    </Carousel>
                </div>
                {/* 首页轮播图的结束 */}
                {/* 首页分类导航开始 */}
                <div className="yg-index-catitems">
                    <div className="catitems-item">
                        <Flex>
                            {
                                this.state.catitems.map(v => {
                                    return <Flex.Item key={v.image_src} onClick={this.handClickCat}>
                                        <img src={v.image_src} alt="" />
                                    </Flex.Item>
                                })
                            }
                        </Flex>
                    </div>
                </div>
                {/* 首页分类导航结束 */}
                {/* 首页列表信息的开始 */}
                <div className="yg-index-product">
                    {
                        this.state.product.map(v => {
                            return <div className="product-item" key={v.floor_title.image_src}>
                                {/* 标题开始 */}
                                <div className="product-title">
                                    <img src={v.floor_title && v.floor_title.image_src} alt="" />
                                </div>
                                {/* 标题结束 */}
                                {/* 图片列表的开始 */}
                                <div className="product-image-list">
                                    {
                                        v.product_list.map(vv => {
                                            return <div className="image-item"
                                                key={vv.image_src}
                                                onClick={this.handleImage}
                                                >
                                                <img src={vv.image_src} alt="" />
                                            </div>
                                        })
                                    }
                                </div>
                                {/* 图片列表的结束 */}
                            </div>
                        })
                    }
                </div>
                {/* 首页列表信息的结束 */}
            </div>
        );
    }
}

export default withRouter(index);
